<script setup lang="ts">
import * as e from 'echarts'
import { onMounted } from 'vue';

onMounted(() => {
    let chart = e.init(document.getElementById("div_echart"))
    chart.setOption({
        textStyle: {
            color: "#fff"
        },
        title: {
            show: true,
            text: "自定义学习用的图表名",
            textStyle: {
                color: "#ffffff",
                fontSize: 22
            }
        },
        legend: {
            show: false,
            type: "plain",
            top: "auto",
            right: "auto",
            left: "auto",
            bottom: "auto"
        },
        xAxis: {
            show: true,
            position: "bottom",
            type: "category",
            data: ["皮衣", "羊毛衫", "羽绒服", "短袖"],
            nameTextStyle: {
                color: "#fff"
            }
        },
        yAxis: {
            show: true,
            position: "left",
            type: "value",
        },
        series: [
            {
                type: "bar",
                data: [1, 2, 3, 4]
            }
        ],
        color: ["#123", "#abc", "#fffff", "10a"],

    })
})

</script>
<template>
    <div id="div_echart">

    </div>
</template>
<style scoped></style>